<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 凡客诚品帮助中心页面</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input[type='text']").focus(function(){
		$(this).val("");
	});
	$("input[type='text']").focusout(function(){
		if($(this).val()=="")
		{
			$(this).val("请输入要查询的问题");
		}
	});
	$("div#nav ul li div").click(function(){
		var thisdiv=$(this);
		thisdiv.parent().prevAll().children("ul").hide(200);
		thisdiv.parent().nextAll().children("ul").hide(200);
		thisdiv.next("ul").toggle(500);
	});	
	$("#tab_bg div").hover(function(){
		$(this).siblings().removeClass("tab_current").addClass("tab_common");
		$("#tab_bg").removeClass().addClass("tab_bg"+$(this).index());
		$(this).removeClass().addClass("tab_current");
	},function(){
	});
	$("p.wenti_result").click(function(){
		if(!$("input[name='IsAvail']").get(0).checked)
		{
			$("div.wenti").css("display","block");
			$("div#TrackContentDiv").css("display","block");
		}
		else
		{
			$("div.wenti").css("display","none");
			$("div#TrackContentDiv").css("display","none");
		}
		/*if($("input[name='IsAvail']").checked().val()==0)
		{
			alert(222);
		}*/
	});
});


</script>
<!--
<div class="qiehuan">
            <input name="IsAvail" type="radio" value="1" checked="checked"  /> 已解决
            <input name="IsAvail" type="radio" value="0"  /> 未解决
            <input id="ContID" type="hidden" value="1"/>
</div>
<div class="tab">
        <div id="tab_bg" class="tab_bg0">
            <div   class="tab_current">
                <a name="index_gwlc_1" class="track" href="#">1.新用户注册</a>
            </div>
            <div   class="tab_common">
                <a name="index_gwlc_2" class="track" href="#">2.挑选商品</a>
            </div>
            <div  class="tab_common">
                <a name="index_gwlc_3" class="track" href="#">3.确认下单</a>
            </div>
            <div  class="tab_common">
                <a name="index_gwlc_4" class="track" href="#">4.订单跟踪</a>
            </div>
            <div   class="tab_common">
                <a name="index_gwlc_5" class="track" href="#">5.验货签收</a>
            </div>
        </div>
    </div>
	-->
<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#bodyDiv{
	position:relative;
	background:#FFF url(images/bg.jpg) no-repeat; 
	width:1016px;
	height:1176px;
	margin:0 auto;
}

.search{
	position:absolute;
	left:125px;
	top:258px; 
	height:24px;
	line-height:24px;
	width:325px;
	color:#999;
}

.tab{
	position:absolute;
	left:276px;
	top:397px;
		
}
#tab_bg{
	width: 700px;
	height: 36px;
	line-height: 36px; 
	cursor: pointer;
}
.tab_bg0 {
	 background: url(images/news_bghover.gif) 0px 0px;
	
}
.tab_bg1 {
 
	background: url(images/news_bghover.gif) 0px -36px;
 
	
}
.tab_bg2 {
	 
	background: url(images/news_bghover.gif) 0px -72px;
 
	
}
.tab_bg3 {
	 
	background: url(images/news_bghover.gif) 0px -108px;
 	
}
.tab_bg4 {
 
	background: url(images/news_bghover.gif) 0px -144px;
 
} 
a{
	color:#000;
	text-decoration:none;
}
.tab_common {
	width: 140px;
	height: 36px;
	line-height: 36px;
	float: left;
	text-align: left;
	cursor: pointer;
	text-indent: 40px;
}

.tab_current {
	width: 140px;
	height: 36px;
	line-height: 36px;
	float: left;
	text-align: left;
	cursor: pointer;
	color: #ffffff;
	text-indent: 40px;
}
 .tab_current a{color:#fff;}

.jiejue2{
	position:absolute;
	left:817px;
	top:750px;
}
/*nav*/
#nav{
	position:absolute;
	top:366px;
	left:26px;
}
#nav ul{
	list-style:none;
} 
#nav ul li{
	 display:block;
	 width:196px; 
	 line-height:30px;
	 border-bottom:1px solid #999;
}
#nav ul li div.first{
	text-indent:20px;
	border-bottom:1px solid #999;
}
#nav ul.second{
	display:none;
}

#nav ul.second li{
	 display:block;
	 width:166px;
	 padding-left:30px;
	 height:30px;
	 line-height:30px;
	 border:none;
}

</style>

</head>
<body>
<div id="bodyDiv">
    <!-- 输入框 --> 
    <input type="text" value="请输入要查询的问题"  name='search'  class='search'/>  
    <!-- 左边导航 -->
    <div id='nav'>
        <ul>
            <li>
                <div class='first'>账号管理</div>
                <ul class='second'>
                    <li>账号注册</li>
                    <li>找回密码</li>
                    <li>账户关联登录</li>
                    <li>账号常见问题</li>
                </ul>
            </li>
             <li>
                <div class='first'>购物指南</div>
                <ul class='second'>
                    <li>购物指南1</li>
                    <li>购物指南2</li>
                    <li>购物指南3</li>
                    <li>购物指南4</li>
                </ul>
            </li>
            
              <li>
                <div class='first'>配送方式</div>
                <ul class='second'>
                    <li>配送方式1</li>
                    <li>配送方式2</li>
                    <li>配送方式3</li>
                    <li>配送方式4</li>
                </ul>
            </li>
             <li>
                <div class='first'>支付方式</div>
                <ul class='second'>
                    <li>支付方式1</li>
                    <li>支付方式2</li>
                    <li>支付方式3</li>
                    <li>支付方式4</li>
                </ul>
            </li>
             
            
        </ul>
    </div>
    <!-- 流程 -->
    <div class="tab">
        <div id="tab_bg" class="tab_bg0">
            <div   class="tab_current">
                <a name="index_gwlc_1" class="track" href="#">1.新用户注册</a>
            </div>
            <div   class="tab_common">
                <a name="index_gwlc_2" class="track" href="#">2.挑选商品</a>
            </div>
            <div  class="tab_common">
                <a name="index_gwlc_3" class="track" href="#">3.确认下单</a>
            </div>
            <div  class="tab_common">
                <a name="index_gwlc_4" class="track" href="#">4.订单跟踪</a>
            </div>
            <div   class="tab_common">
                <a name="index_gwlc_5" class="track" href="#">5.验货签收</a>
            </div>
        </div>
    </div>
    
    <!-- 提交问题 -->
    
    
    <div class="jiejue2">
    
        <h3>这条帮助是否解决了您的问题？</h3>
        <div class="qiehuan">
            <input name="IsAvail" type="radio" value="1" checked="checked"  /> 已解决
            <input name="IsAvail" type="radio" value="0"  /> 未解决
            <input id="ContID" type="hidden" value="1"/>
		</div>
        <div class="wenti" style="display:none">
            <p>问题没解决？请选择原因:</p>
            <p><select name="TrackID" id="TrackID"  >
                    <option value="1">文字太多，阅读困难</option>
                    <option value="2">内容复杂，看不懂</option>
                    <option value="3">描述不清楚</option>
                    <option value="99">其他原因</option>
            </select></p>
            <div id="TrackContentDiv" style=" display:none;">
            <p>也可以直接填写原因:</p>
            <p><textarea name="TrackContent" id="TrackContent" cols="45" rows="5"  ></textarea></p>
            </div>
        </div>
        <p class="wenti_result"><a href="###"><img src="images/submit_bt.jpg"/></a></p> 
    </div> 

</div>

</body>
</html>
